Add tab-based navigation to designer left sidebar by Copilot · Pull Request #27 · objectstack-ai/objectui

Copilot · 2026-01-14T12:28:40Z

The designer's component tree and palette consumed excessive horizontal space (~336px) when displayed side-by-side. Users needed a more compact layout.

Changes

New LeftSidebar component: Unified left panel with tabs for Components/Tree switching
Refactored component headers: Removed duplicate headers from ComponentPalette and ComponentTree (now displayed in tab labels)
Simplified state management: Removed showComponentTree toggle and associated context state
Space optimization: Reduced left sidebar from ~336px to 288px (single panel width)

Implementation

// New LeftSidebar with tab navigation
<div className="w-72">
  <div className="flex border-b">
    <button onClick={() => setActiveTab('palette')}>Components</button>
    <button onClick={() => setActiveTab('tree')}>Tree</button>
  </div>
  <div className="flex-1">
    {activeTab === 'palette' ? <ComponentPalette /> : <ComponentTree />}
  </div>
</div>

Screenshots

Components tab:

Tree tab:

All existing functionality (drag-drop, tree navigation, keyboard shortcuts) preserved.

Original prompt

设计器的组件树和组件选择器可以用选项卡来区别，否则太占空间了

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot

Pull request overview

This PR refactors the designer's left sidebar to use a tab-based interface, consolidating the component palette and component tree into a single panel to save horizontal space.

Changes:

Introduced a new LeftSidebar component with tab navigation between Components and Tree views
Removed the component tree toggle button from the Toolbar
Cleaned up the DesignerContext by removing showComponentTree state management

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`packages/designer/src/index.ts`	Exports the new `LeftSidebar` component
`packages/designer/src/context/DesignerContext.tsx`	Removes `showComponentTree` state and related context values
`packages/designer/src/components/Toolbar.tsx`	Removes the component tree toggle button and its associated imports
`packages/designer/src/components/LeftSidebar.tsx`	Adds new tab-based sidebar component with Components/Tree switching
`packages/designer/src/components/Designer.tsx`	Integrates the new `LeftSidebar` component, removing conditional tree rendering
`packages/designer/src/components/ComponentTree.tsx`	Removes the component header section (now shown in tab label)
`packages/designer/src/components/ComponentPalette.tsx`	Removes the component header section and adjusts border styling

Copilot · 2026-01-14T12:41:33Z

+  const [activeTab, setActiveTab] = useState<TabType>('palette');
+
+  return (
+    <div className={cn("flex flex-col h-full bg-white border-r w-72", className)}>


The component applies both w-72 and a border-r to the root div, but line 47 removes the border with border-r-0. This creates conflicting border declarations. Consider removing border-r from line 17 since the parent in Designer.tsx already applies shadow styling and the explicit border-r-0 override suggests the border shouldn't be here.

Suggested change

<div className={cn("flex flex-col h-full bg-white border-r w-72", className)}>

<div className={cn("flex flex-col h-full bg-white w-72", className)}>

Copilot · 2026-01-14T12:41:33Z

+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1 overflow-hidden border-r-0">


The border-r-0 class is unnecessary here since there's no border-right defined on this element or its parent content area. This appears to be a defensive override that adds no value. Remove it for cleaner styling.

Suggested change

<div className="flex-1 overflow-hidden border-r-0">

<div className="flex-1 overflow-hidden">

huangyiirene · 2026-01-14T12:42:47Z

@copilot 帮我修改

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

hotlong · 2026-01-14T13:00:32Z

@copilot 继续

github-actions · 2026-01-14T13:00:43Z

✅ All checks passed!

✅ Type check passed
✅ Tests passed
✅ Lint check completed

Copilot · 2026-01-14T13:05:40Z

@copilot 继续

已完成代码审查反馈的修复。移除了冲突的 border 类声明，使样式更加清晰。所有功能正常工作。

Changes made in commit c0de3e4:

Removed border-r from line 17 (LeftSidebar root div)
Removed unnecessary border-r-0 from line 47 (tab content container)

Components Tab:

Tree Tab:

Initial plan

97eb0e3

Copilot AI assigned Copilot and huangyiirene Jan 14, 2026

Copilot started work on behalf of huangyiirene January 14, 2026 12:29 View session

Copilot AI and others added 2 commits January 14, 2026 12:34

Implement tab-based interface for component tree and palette

ea5999c

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Address code review feedback - refactor border-r-0 to parent container

9f4eda2

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add tabs to differentiate component tree and selector~~ Add tab-based navigation to designer left sidebar Jan 14, 2026

Copilot AI requested a review from huangyiirene January 14, 2026 12:40

Copilot finished work on behalf of huangyiirene January 14, 2026 12:40

huangyiirene requested review from Copilot and removed request for huangyiirene January 14, 2026 12:40

Copilot AI reviewed Jan 14, 2026

View reviewed changes

Copilot started work on behalf of huangyiirene January 14, 2026 12:43 View session

Changes before error encountered

c0de3e4

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Copilot AI requested a review from huangyiirene January 14, 2026 12:56

Copilot started work on behalf of hotlong January 14, 2026 13:01 View session

Copilot AI requested a review from hotlong January 14, 2026 13:06

Copilot finished work on behalf of hotlong January 14, 2026 13:06

huangyiirene marked this pull request as ready for review January 14, 2026 13:17

huangyiirene merged commit c0ef1a6 into main Jan 14, 2026
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tab-based navigation to designer left sidebar#27

Add tab-based navigation to designer left sidebar#27
huangyiirene merged 4 commits intomainfrom
copilot/add-tabs-for-component-selector

Copilot AI commented Jan 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 14, 2026

Uh oh!

Copilot AI Jan 14, 2026

Uh oh!

huangyiirene commented Jan 14, 2026

Uh oh!

hotlong commented Jan 14, 2026

Uh oh!

github-actions Bot commented Jan 14, 2026

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<div className={cn("flex flex-col h-full bg-white border-r w-72", className)}>
	<div className={cn("flex flex-col h-full bg-white w-72", className)}>

	<div className="flex-1 overflow-hidden border-r-0">
	<div className="flex-1 overflow-hidden">

Conversation

Copilot AI commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Implementation

Screenshots

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

huangyiirene commented Jan 14, 2026

Uh oh!

hotlong commented Jan 14, 2026

Uh oh!

github-actions Bot commented Jan 14, 2026

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Copilot AI commented Jan 14, 2026 •

edited

Loading